Skip to main content

Creating field groups in Constellation Views

6 Tasks

35 mins

 Pega Platform '23 Visible to: All users
Intermediate Pega Platform '23 Constellation User Experience English

Scenario

Important aspects of the UI configuration for the Tell Us More application from Sweet Life Inc. are field groups and the Search and select pattern for navigating product list information. As a System Architect on the Sweet Life application project, you are tasked with configuring the Service Details and Product Details Views that incorporate these UI features.

Note: Complete the challenge Designing Views with Constellation before beginning this challenge.

The following table provides the credentials you need to complete the challenge:

Role User name Password
System Architect Author@SL pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Challenge Walkthrough

Detailed Tasks

1 Add fields to the Data Model of the Incident Case Type

  1. In the Pega instance for the challenge, enter the following credentials:
    1. In the User name field, enter Author@SL.
    2. In the Password field, enter pega123!
  2. In the navigation pane of App Studio, click Case Types > Incident to open the Incident Case Type.
  3. Click the Data Model tab.
  4. Add the following fields to the Data Model:
    Name Type Picklist options Choices
    What happened? Text (paragraph) Not applicable Not applicable
    When did this happen? Date only Not applicable Not applicable
    Communication channel Picklist Local In person, Email, Phone, and Postal
  5. Click Save.

2 Configure a field group and Validation in the Service Details View

  1. In the Incident Case Type, click the Workflow tab.
  2. Click the Service Issue Step to open the contextual properties pane on the right.  
  3. Click Configure View to open the Edit View: Service Details window.
  4. In the Fields section, click Add > Fields > Communication channel > Add to add the field to the View.
  5. Click Add, and then click Create Field Group.
    The Create field group link.
    Note: Field groups are unique to the View in which they are created. For more information about field groups, see Configuring field groups.
  6. In the New field group window, enter the following information:
    1. In the Heading field, enter Incident details.
    2. In the Instructions list, select Show instructions.
    3. In the Instructions text field, enter Please answer the questions below.
    4. Click Submit.
      The Incident details field group configuration.
  7. In the Incident details field group row, click Add.
    The Field group add button.
  8. Click Fields, select the What happened? and When did this happen? checkboxes, and then click Add.
    Adding fields to the Incident details field group in the Service Details View.
  9. To the right of Communication channel, click the Gear icon to display the Configure field window.
  10. In the Conditions section, in the Required field, select Always, and then click Save.
  11. Repeat Steps 9-10 for the What happened? and When did this happen? fields.
  12. In the Service Details window, click the Conditions tab.
    Highlighting the Conditions tab in the Service Details configuration window
  13. Click Add condition, and then in the Message field, enter The date must be in the past.
  14. Create a Condition that states When did this happen? is after Today, and then click Submit.
    Validation on the When did this happen? field.
    Note: For more information about building a custom Condition, see Defining Conditions in the Condition builder.
  15. Click Save.

3 Configure the field groups for the Product Details View

  1. In the Incident Case Type, click the UX tab.
  2. Click the Other Views tab, and then in the Form section, click the Product Details View.
  3. Click Add > Create field group to create a new field group with the following details:
    1. In the Heading field, enter Select product.
    2. In the Instructions list, select Show instructions.
    3. In the Instruction text field, enter Please select the product that was involved in the incident.
    4. Click Submit.
      The Select product field group configuration.
  4. Repeat step 3 to create a new field group with the following details:
    1. In the Heading field, enter Incident details.
    2. In the Instructions list, select Show instructions.
    3. In the Instruction text field, enter Please answer all of the questions below.
    4. Click Submit.

4 Configure the Select Product field group

  1. In the Select product field group row, click Add, and then click Fields > Create new field.
  2. Create a new field with the following details:
    1. In the Name field, enter Product.
    2. In the Type list, select Data Reference.
    3. In the Data object list, select Product.
    4. In the Options section, select Single record.
    5. Expand the Advanced section, and then select the Reference data is copied to the Case checkbox.
    6. In the Data Page list, select Product.
    7. Click Submit.
      The Product field details.
  3. Click the Product field.
    Highlighting the Product field in the Select products field group.
  4.  In the Edit field: Product window, in the Input settings section, configure the following details:
    1. In the Data Page field, select List Product.
    2. In the Mode field, select Single-select.
    3. In the Display as field, select Table.
    4. In the Display field, select Name.
    5. In the Columns section, add the following columns to the view:
      • Name
      • SKU
      • Category Name
    6. Select the Enable search checkbox.
    7. In the Search fields section, add the following fields to the view:
      • Name
      • SKU
      • Category Name
    8. Click Back to return to the Product Details View.
      The Back button on the completed Product View.
  5. Add the Cost field to the Product data object:
    1. In the Select Product field group row, click Add.
    2. Click Fields > Product > Fields > Cost.
      Note: Click the arrow located to the right of a data object to access the associated fields and Views.
      Highlighting the arrow located to the right of the Product data object.
  6. In the Select product field group row, click Add, and then click Fields > Create new field.
  7. Create a new field with the following details:
    1. In the Name field, enter Picture.
    2. In the Type field, select Attachment.
    3. In the Attachment category field, enter Picture.
    4. In the Type field, select Single record.
    5. Click Submit.
      Details of the new Picture field.
  8. In the Picture field row, click the Gear icon. 
  9. In the Configure field: Picture window, complete the following details:
    1. In the Label value field, enter Proof.
    2. In the Helper text field, enter Please attach proof of issue.
      Configuration for the Picture (Proof) field.
    3. Click Save.
      The following figure shows the configuration of the Select product field group:
      Completed Select product field group.

5 Configure the Incident details field group

  1. In the Incident details field group row, click Add.
  2. Click Fields, select the What happened? and When did this happen? checkboxes, and then click Add.
    The Incident details field group.

6 Configure Validation on the Product Details View

  1. In the Incident Case Type, click the Workflow tab.
  2. Click the Product Issue Step to open the contextual properties pane on the right.
  3. Click Configure View to open the Edit View: Product Details window.
  4. In the Edit View: Product Details window, click the Conditions tab.
  5. Click Add Condition.
  6. Complete the following steps to create the conditional Validation:
    1. In the Message field, enter The date must be in the past.
    2. Create a Condition that states When did this happen? is after Today.
    3. Click Submit.
      Validation on the When did this happen? field.
  7. Click Save.

Confirm your work

  1. In the header of App Studio, click Preview.
  2. Create a new Incident Case.
  3. In the Incident Type field, select Customer service issue, and then select an Incident SubType. Click Next.
  4. Review the content of the Service Issue View, specifically noting the contents of the Incident details field group. 
    The Service Issue View
  5. In the When did this happen? field, enter a date that is in the future. Confirm that you receive error messages for the required fields and the incorrect date.
    And error message appears when the date is in the future.
  6. Cancel out of the existing Case and create a new Incident Case. 
  7. In the Incident Type field, select Product faulty or unsafe, and then select an Incident SubType. Click Next.
  8. Review the content of the Product Issue View, specifically noting the contents of the Select product and Incident details field groups.
  9. To confirm that the Search and select pattern is working for the Product list, in the Category Name field, enter Lollipops,  and then click Search.
  10. Still in the Select product section, click Clear, then in the Category Name field, enter Cookies and click Search.

This Challenge is to practice what you learned in the following Module:

Available in the following mission:

Return to mission
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice